<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Barotrauma Text Splitter</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script async src='main.js'></script>
</head>

<body>
    <header>
        <h1>Barotrauma Item Text Splitter</h1>
    </header>
    <main>
        <p>Start convert your XML file: copy and paste your content down below.</p>
        <div id="textpanel">
            <div id="inputpanel">
                <label for="input">Input</label>
                <!-- <input type="file" id="inputfile" /> -->
                <textarea id="input" name="input"></textarea>
            </div>
            <div id="outputpanel">
                <label for="output">Output</label>
                <textarea id="output" name="output" readonly></textarea>
            </div>
        </div>
        <div id="controlpanel">
            <button id="parse">Parse</button>
            <button id="clear">Clear</button>
            <!-- <button id="save">Save</button> -->
        </div>
        <div id="description">
            <p>
                How to use, step by step:
            <ol>
                <li>Copy the entire content of your XML file into "Input" text area.</li>
                <li>Click "Parse" button.</li>
                <li>The result would be displayed in "Output" text area.</li>
            </ol>
            </p>
        </div>
    </main>
</body>

</html>